<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <!-- 方法一：通过props来父组件来获得子组件中定义的事件获得的子组件中数据 -->
    <School :getSchoolName="getSchoolName"/>
    <hr>

        <!-- 方法二、通过组件自定义事件来把子组件中的数据传递给父组件 -->
    <!-- <Student v-on:atguigu="getStudentName"/> -->


            <!-- 方法三、通过ref来实现子组件把数据传递到父组件中 -->
    <Student ref="student"/>
  </div>
</template>

<script>
import School from './components/School.vue'
import Student from './components/Student.vue'

export default {
  name: 'App',
  
  //注册School组件
  components: {
    School,
    Student
  },
  data(){
    return{
      msg:'你好啊'
    }
  },
  methods:{
    getSchoolName(name){
      console.log("从school组件中获取到的名字是",name)
    },
    getStudentName(name){
      console.log("从student组件中获取到的学生的名字是",name)
    }
  },
  mounted(){
    //方法三、通过ref来实现  这样的方法更具有灵活性
    //这里是直接来获取组件的实例化对象
    this.$refs.student.$on('atguigu',this.getStudentName);

    //三秒钟后调用事件
    // setTimeout(()=> {
    //   this.$refs.student.$on('atguigu',this.getStudentName);

    // },3000)

  }
}
</script>

<style>

</style>
